<template>
  <div class="card gradientStyle">
    <p>{{ title }}</p>
    <el-date-picker
        type="date"
        placeholder="选择生效时间"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        style="width: 140px;"
    />
  </div>
</template>

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  title: {
    type: String,
    require: true,
    default: ''
  }
})
</script>
<style scoped>
.card {
  flex: 0 0 calc(20% - 16px); /* 每行显示4个卡片，减去间距 */
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 16px;
  background-color: #fddcc3;
  min-width: 200px; /* 卡片最小宽度 */
}
</style>